import React from 'react';
import './index.css';
import MZListView from '../../../../components/MZListView';
import mzsdk from '../../../../utils/mzsdk';

import { Toast } from 'antd-mobile';

/**
 * 在线观众列表组件
 */

export default class OnlineAudience extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            audiences: [],//观众列表

            hasMore: true,
            refreshing: false,
            isLoading: false,
            limit: 50,
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData = (isMore) => {
        var _this = this;
        var offset = '0';
        if (isMore) {
            offset = this.state.audiences.length
        }
        var audiencesParams = {
            ticketId: this.props.ticketId,//活动ID
            offset: offset,//偏移,当前已经返回的数据总个数
            limit: this.state.limit//请求返回的列表个数
        }

        mzsdk.getOnlines(audiencesParams).then(res => {
            console.log('获取在线观众列表：', res)
            var tempArr = res ? res : [];
            if (!isMore) {
                _this.setState({
                    audiences: tempArr,
                    refreshing: false,
                    hasMore: tempArr.length >= _this.state.limit ? true : false
                }, () => {
                    if (tempArr.length < 50) {
                        let e = {
                            audiences: tempArr,
                        }
                        mzsdk.mzee.emit('update-audiences-change', e)
                    }
                })
            } else {
                if (tempArr.length < _this.state.limit) {
                    _this.setState({
                        isLoading: false,
                        hasMore: false
                    })
                } else {
                    _this.setState({
                        isLoading: false
                    })
                }
                var newAudiences = _this.state.audiences.concat(tempArr)
                _this.setState({
                    audiences: newAudiences
                })
            }
        }, (err) => {
            Toast.info(err.msg, 1.5)
            _this.setState({
                isLoading: false,
                refreshing: false,
            })
        })
    }

    // 下拉刷新
    onRefresh = () => {
        this.setState({
            refreshing: true,
            hasMore: true
        }, () => {
            this.getData(false)
        })
    }

    // 滑动到底部时加载更多
    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
            return
        }
        this.setState({
            isLoading: true,
        }, () => {
            this.getData(true)
        })
    }

    render() {
        let { audiences, total, refreshing, isLoading, limit } = this.state;

        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID} className="live-player-audiences-item">
                    <img className="live-player-audiences-item-avatar" src={rowData.avatar}></img>
                    <div className="live-player-audiences-item-nickname">{rowData.nickname}</div>
                </div>
            )
        }
        return (
            <div>
                <MZListView
                    className="live-player-audiences-list"
                    data={audiences}
                    renderFooter={() => (audiences.length >= limit && <div>{isLoading ? '加载中...' : '暂无更多数据'}</div>)}
                    renderRow={row}
                    initialListSize={limit}

                    onPullToRefresh={true}
                    refreshing={refreshing}
                    onRefresh={this.onRefresh}

                    onEndReached={this.onEndReached}
                />
            </div>
        )
    }
}
